<template>
	<view class="">
		<u-toast ref="uToast"></u-toast>
		<!-- <view v-for="(i,index) in patient" :key="patient.name"> -->
		<scroll-view style="width: 100%; height: 2000rpx; margin: auto;" scroll-y="true">
			<view v-for="(i,index) in patient" :key="i.id">
				<!-- <text> </text> -->
				<view style="width: 750rpx; height: 30rpx;"></view>
				<view class="head">
						<!-- <view style="text-align: center;margin: 20rpx 0 80rpx 0;font-size: 45rpx;font-weight: 600;">用户信息</view> -->
					<view class="normal">
						姓名：{{i.name}}
					</view>
					<view  class="normal">
						性别：{{i.sex == 0? '男':'女'}}
					</view>
					<view  class="normal">
						<view style="color: crimson;display: inline-block;">*</view>卡号：<view style="display: inline-block;color: #000000;">{{i.card}}</view>
					</view>
					<view  class="normal">
						<view style="color: crimson;display: inline-block;">*</view>身份证号：{{i.card_id.substring(0, 6) +	 '******' + i.card_id.substring(14,18)}}
					</view>
					<view  class="normal">
						<view style="color: crimson;display: inline-block;">*</view>电话：<view style="display: inline-block;color: #000000;">{{i.phone}}</view>
					</view>
				</view>
				<view style="width: 750rpx; height: 15rpx;"></view>
			</view>
		</scroll-view>
		<u-empty text="到底了"></u-empty>
		<!-- </view> -->
		<u-popup :show="showupp" mode="center" @close="close" @open="open">
			<view style="width: 750rpx;">
				<scroll-view>
					<view class="main">
						<br>
						<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth=75>
							<u-form-item label="姓名" prop="name" borderBottom ref="item1">
								<u--input v-model="form.name" type="text" placeholder="请输入姓名"></u--input>
							</u-form-item>
							<u-form-item label="身份证号" prop="id" borderBottom ref="item1">
								<u--input v-model="form.id" placeholder="请输入身份证号"></u--input>
							</u-form-item>
							<u-form-item label="手机号码" prop="phone" borderBottom ref="item1">
								<u--input v-model="form.phone" border="none" placeholder="请输入手机号码"></u--input>
							</u-form-item><br>
							<u-form-item label="出生日期" prop="birthday" borderBottom ref="item1">
								<l-calendar v-model="show" @change="change"></l-calendar>
								<u-button
									@click="show = true">{{form.birthday == ''? '请选择出生日期':form.birthday}}</u-button>
							</u-form-item><br>
							<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true; hideKeyboard()"
								ref="item1">
								<!-- <u--input v-model="form.sex == 0? '男':'女'" disabledColor="#ffffff" placeholder="请选择性别"
									border="none" @click="showSex = true; hideKeyboard()"></u--input> -->
									<text v-show="form.sex == null? true:false" style="color: darkgrey;">请选择性别</text>
									<text v-show="form.sex == null? false:true">{{form.sex == 0? '男':'女'}}</text>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item><br>
							<u-form-item label="地址" prop="address" borderBottom ref="item1">
								<u--input v-model="form.address" border="none" placeholder="请输入地址"></u--input>
							</u-form-item><br>
							<!-- <u-form-item label="卡号" prop="card" borderBottom ref="item1">
								<u--input v-model="form.card" border="none" placeholder="请输入卡号"></u--input>
							</u-form-item><br> -->
						</u--form>
						<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
							@select="sexSelect">
						</u-action-sheet>
					</view>
				</scroll-view>
				<view>
					<u-button style="border-radius: 80rpx;" type="primary" text="保存" @click="sub"></u-button>
				</view>
			</view>
		</u-popup>
		<view class="btn">
			<u-button style="border-radius: 80rpx;" type="primary" text="点击添加就诊人" @click="add"></u-button>
		</view>
	</view>

</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				patient: [],
				showupp: false,
				sex: null,
				show: false,
				form: {
					name: '',
					sex: null,
					birthday: '',
					id: '',
					address: '',
					phone: ''
					// card: ''
				},
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [
					{
						name: '男',
						value: 0
					},
					{
						name: '女',
						value: 1
					},
				],
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					sex: {
						type:'number',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					id: {
						type: 'string',
						required: true,
						len:18,
						message: '身份证号位数不正确',
						trigger: ['blur', 'change']
					},
					address: {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					birthday: {
						type: 'string',
						// max: 1,
						required: true,
						message: '请选择生日日期',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true,
						len:11,
						message: '手机位数不正确',
						trigger: ['blur', 'change']
					}
					// card: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写卡号',
					// 	trigger: ['blur', 'change']
					// }
				},
				radio: '',
				switchVal: false,
				tomorrow: "",
				dayAfterTomorrow: ""
			};
		},
		mounted() {
			console.log(this.$store.state.open_id);
			uni.request({
				url:'http://124.223.168.50:8000/test/visitor/',
				method:'GET',
				data:{
					open_id:this.$store.state.open_id
				},
				withCredentials:true,
				success: (res) => {
					console.log(res)
					this.patient = res.data.msg
				}
			})
			
		},
		methods: {
			add() {
				this.showupp = true
			},
			close(e) {
				console.log(e)
				this.showupp = false
			},
			open(e) {
				console.log(e)
			},
			sub() {
				this.$refs.uForm.validate().then(res => {
					console.log(res)
					console.log(this.form)
					console.log(this.sex)
					var pn = {
						name: this.form.name,
						sex: this.sex,
						birthday: this.form.birthday,
						card_id: this.form.id,
						address: this.form.address,
						phone: this.form.phone,
						card:this.form.card,
						open_id:this.$store.state.open_id
					}
					console.log(pn)
					uni.request({
						url:'http://124.223.168.50:8000/test/visitorAPIView/',
						method:'POST',
						data:pn,
						success: (res) => {
							console.log(res)
						},
						fail: (err) => {
							console.log(err)
						}
					})
					this.patient.push({
						name: this.form.name,
						sex: this.form.sex,
						birthday: this.form.birthday,
						card_id: this.form.id,
						address: this.form.address,
						phone: this.form.phone,
						card:this.form.card
					})
					this.form = {
						name: '',
						sex: null,
						birthday: '',
						id: '',
						address: '',
						phone: '',
						card: ''
					}
					this.showupp = false
					
				}).catch(err => {
					console.log(err)
					this.$refs.uToast.show({
						type: 'warning',
						message: '请把信息填写完整'
					})
				})

			},
			sexSelect(e) {
				console.log(e)
				this.form.sex = this.sex = e.value
				console.log(this.form)
			},
			hideKeyboard() {
				console.log(123)
			},
			change(e) {
				console.log(e)
				this.form.birthday = e.result
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			//#ifndef H5
			// this.$refs.uForm.setRules(this.rules)
			//#endif
		},
	};
</script>
<style scoped>
	.btn {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
	}

	.main {
		width: 700rpx;
		margin: auto;
	}
	.head {
		width: 700rpx;
		margin: auto;
		border: 1px solid #878787;
		box-shadow: 5rpx 5rpx 15rpx 8rpx #e7e7e7;
		border-radius: 20rpx;
		/* padding-bottom: 100rpx; */
	}
	.normal{
		margin: 15rpx 15rpx;
		padding: 0 0 20rpx 10rpx;
		border-bottom:1rpx solid #e7e7e7;
		color: #565656;
	}
	/* .uni-u--input-placeholder {
		display: none;
	} */
</style>